<template>
  <table class="pure-table">
    <thead>
      <tr>
        <th>返回值</th>
        <th>映射到</th>
        <th style="width: 90px">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in responseData" :key="index">
        <td>
          <el-input
            v-model="item.jsonSource"
            placeholder="例：$.data.origin"
          />
        </td>
        <td>
          <el-input
            v-model="item.jsonTarget"
            placeholder="例：$.data.target"
          />
        </td>
        <td style="width: 90px">
          <span class="del" @click="delRow(index)">删除</span>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <el-button type="primary" @click="addRow">+增加参数</el-button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { reactive, ref, onMounted, defineComponent, watch } from "vue";
export default defineComponent({
  emits: ["callRequest"],
  props: ["tableData", "mode"],
  setup(props, ctx) {
    const responseData = ref([]);
    const delRow = (index) => {
      responseData.value.splice(index, 1);
    };

    const addRow = () => {
      responseData.value.push({ jsonSource: "", jsonTarget: "" });
    };
    watch(
      () => responseData,
      (newData, oldData) => {
        ctx.emit("callRequest", responseData.value);
      },
      { deep: true }
    );
    watch(
      () => props.tableData,
      (newData, oldData) => {
        responseData.value = props.tableData;
      },
      { deep: true }
    );

    return {
      responseData,
      addRow,
      delRow,
    };
  },
});
</script>
<style scoped lang="scss">
thead,
tbody {
  th,
  td {
    width: calc(50% - 45px);
  }
}
</style>
